<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<div class="jingdong">
			<div class="jdT">
				<a href="">京东<span>JD.COM</span>官网 多快好省 只为品质生活</a>
				<p>官方</p>
			</div>
			<div class="jdC">
				<div class="jdC-L">
					<img src="images/7.jpg" alt="">
				</div>
				<div class="jdC-R">
					<p class="p1">京东JD.COM-专业综合网上购物商城，
					销售超数万品牌，4020万种商品，囊括
					<span class="sp1">家电</span>、<span>手机</span>、<span>电脑</span>、<span>服装</span>、<span>居家</span>、母婴、
					美妆、个护、食品、旅游等13大品类。
					京东PLUS会员，免费体验30天！京东
					秉承客户为先， 100％正品行货保障，
					提供全国联保，机打发票，专业配送，
					售后服务！</p>
					<div class="wangzhan">
						<p class="p2">www.JD.com2020-10</p>
						<div class="bao"></div>
						<p class="p3"> - 品牌广告</p>
					</div>
				</div>
			</div>
			<div class="tab">
				<ul class="item">
					<li class="active">
						<a href="javascript:;">家用电器</a>
					</li>
					<li>
						<a href="javascript:;">手机通讯</a>
					</li>
					<li>
						<a href="javascript:;">电脑数码</a>
					</li>
					<li>
						<a href="javascript:;">食品百货</a>
					</li>
					<li>
						<a href="javascript:;">生活服务</a>
					</li>
					<li>
						<a href="javascript:;">京东国际</a>
					</li>
				</ul>
				<div class="content">
					<div class="nei show">
						<div class="pic">
							<img src="images/1.jpg" alt="">
						</div>
						<div class="picR">
							<div class="biao">
								<a href=""><span>大牌空调1元试用、以旧换新立抵600元</span></a>
							</div>
							<ul>
								<li>
									<div class="kong"></div>
									<a href="">爆款1元试用</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">小米82英寸9999</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">冰洗24期免息</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">舒适吹空调</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="nei">
						<div class="pic">
							<img src="images/2.jpg" alt="">
						</div>
						<div class="picR">
							<div class="biao">
								<a href=""><span>买手机 逛京东 放心换手机</span></a>
							</div>
							<ul>
								<li>
									<div class="kong"></div>
									<a href="">抢1111购机神券</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">华为Mate40新品</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">iPhone12新品上市</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">11.11OPPO狂欢</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="nei">
						<div class="pic">
							<img src="images/3.jpg" alt="">
						</div>
						<div class="picR">
							<div class="biao">
								<a href=""><span>头号玩家的上分利器</span></a>
							</div>
							<ul>
								<li>
									<div class="kong"></div>
									<a href="">RTX30系列显卡</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">装机必备热卖榜</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">白条最高6期免息</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">机械键盘低至99元</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="nei">
						<div class="pic">
							<img src="images/4.jpg" alt="">
						</div>
						<div class="picR">
							<div class="biao">
								<a href=""><span>京东超市 好物低至5折</span></a>
							</div>
							<ul>
								<li>
									<div class="kong"></div>
									<a href="">个护清洁爆款直降</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">正品美酒爆品直降</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">食饮领券199减100</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">给宝贝最好的爱</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="nei">
						<div class="pic">
							<img src="images/5.jpg" alt="">
						</div>
						<div class="picR">
							<div class="biao">
								<a href=""><span>京东拍卖，畅拍捡漏，万件珍品，免保参怕！</span></a>
							</div>
							<ul>
								<li>
									<div class="kong"></div>
									<a href="">爆款车品5折抢购</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">1.11元抢5折房</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">京东酒店600减60</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">鲜花绿植低价特惠</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="nei">
						<div class="pic">
							<img src="images/6.jpg" alt="">
						</div>
						<div class="picR">
							<div class="biao">
								<a href=""><span>全球商品 低至5折</span></a>
							</div>
							<ul>
								<li>
									<div class="kong"></div>
									<a href="">跨境美妆 3件5折</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">数码家电爆款直降</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">母婴满299减100</a>
								</li>
								<li>
									<div class="kong"></div>
									<a href="">全球保健爆款直降</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="but">
				<ul>
					<li>
						<a href="">PLUS会员</a>
					</li>
					<li>
						<a href="">京东超市</a>
					</li>
					<li>
						<a href="">京东生鲜</a>
					</li>
					<li>
						<a href="">图书音像</a>
					</li>
					<li>
						<a href="">企业采购</a>
					</li>
				</ul>
			</div>
			
		</div>
		<script>
			var item = document.querySelectorAll('.tab .item>li');
			console.log(item);
			var content = document.querySelectorAll('.tab .nei');
			console.log(content)
			for(var i=0; i<item.length; i++){
				item[i].setAttribute('index',i);
				item[i].onclick = function(){
					var index = this.getAttribute('index');
					console.log(index)
					for(var j=0; j<item.length; j++){
						item[j].classList.remove('active');
						content[j].classList.remove('show');
					}
					this.classList.add('active');
					content[index].classList.add('show');
				}
			}
		</script>
	</body>
</html>
